<template>
  <div class="index_body">
    <div class="bg"></div>
    <div>
      <div class="index_login">Login</div>
      <form :model="formAdmin" class="index_form">
        <div class="index_input">
          <input type="text" v-model="formAdmin.username" required />
          <span>user</span>
          <i></i>
        </div>
        <div class="index_input">
          <input type="password" v-model="formAdmin.password" required />
          <span>pass</span>
          <i></i>
        </div>
        <el-button
          class="index_button"
          :loading="loading"
          type="button"
          @click="submitForm"
        >
          Login
        </el-button>
      </form>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/loginApi";

export default {
  data() {
    return {
      formAdmin: {
        username: "",
        password: "",
      },
      loading: false,
    };
  },
  methods: {
    submitForm() {
      this.loading = true;
      const username = this.formAdmin.username;
      const regex = /^[a-zA-Z0-9]{6,20}$/;

      if (!regex.test(username)) {
        this.$message.error("用户名不合法");
        this.loading = false;
        return false;
      }
      if (this.formAdmin.username == "") {
        this.$message.error("请输入用户名");
        this.loading = false;
        return false;
      }
      if (this.formAdmin.password == "") {
        this.$message.error("请输入密码");
        this.loading = false;
        return false;
      }
      login(this.formAdmin).then((resp) => {
        if (resp.data.code == 200) {
          this.$message.success("登录成功！正在进入首页~");
          this.loading = false;
          localStorage.setItem("token", resp.data.data.token);
          // localStorage.setItem("admin", JSON.stringify(resp.data.data));
          localStorage.setItem("activeIndex", "1");
          this.$router.push("/index");
        } else {
          this.$message.error(resp.data.msg);
          this.loading = false;
        }
      });
    },
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
  user-select: none;
  box-sizing: border-box;
}
.index_body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  min-height: 100vh;
  color: #fff;
  text-align: center;
  flex-direction: column;

  background-image: linear-gradient(
    125deg,
    #492d1c,
    #008c8c,
    #e6acfb,
    #0095b6,
    #063a14,
    #dedede
  );
  background-size: 400%;
  animation: bgmove 20s infinite;
}
@keyframes bgmove {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.index_login {
  width: 100%;
  height: 60px;
  font-size: 40px;
  margin-bottom: 20px;
  text-shadow: 3px 4px 5px rgba(0, 0, 0, 0.6);
}
.userAndadmin {
  margin-top: 30px;
  font-size: 1rem;
  color: #008c8c;
}
.index_input {
  position: relative;
  width: 280px;
  margin-top: 30px;
}
.index_input input {
  width: 100%;
  background-color: transparent;
  color: #fff;
  border: 0;
  outline: none;
  box-shadow: none;
  font-size: 1rem;
  letter-spacing: 0.1rem;
  padding: 10px 0 5px;
}
.index_input span {
  position: absolute;
  left: 0;
  padding: 10px 0 5px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  pointer-events: none;
  letter-spacing: 0.1rem;
  transition: 0.5s;
  font-size: 1.5rem;
}
.index_input input:valid ~ span,
.index_input input:focus ~ span {
  color: #2196f3;
  transform: translateY(-16px);
  font-size: 0.65rem;
}
.index_input i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  overflow: hidden;
}
.index_input i::before {
  content: "";
  left: -100%;
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    #002fa7,
    #e6acfb,
    #0095b6,
    #063a14,
    #dedede
  );
  animation: animate 2s linear infinite;
  transition: 0.5s;
}
.index_input input:valid ~ i::before,
.index_input input:focus ~ i::before {
  left: 0;
}
@keyframes animate {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 280px;
  }
}
.index_button {
  width: 280px;
  padding: 10px;
  margin-top: 30px;
  background-color: turquoise;
  border: 2px;
  font-size: 1.2rem;
  color: #fff;
  transition: 0.5s;
  border-radius: 15px;
}
.index_button:valid,
.index_button:hover {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  color: #2196f3;
}
</style>
